<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>FORT后台管理 - 抽奖列表</title>
    <link href="css/styles.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
          crossorigin="anonymous"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
    <script src="assets/demo/datatables-demo.js"></script>
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand" href="/index">FORT后台管理</a>
    <!-- Navbar Search-->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
        <div class="input-group">

        </div>
    </form>
    <!-- Navbar-->
    <ul class="navbar-nav ml-auto ml-md-0">
        <li class="nav-item dropdown">
            <button  id="name"></button>
            <button type="button" id="logout"><img src="assets/img/box-arrow-right.svg" alt="" width="32" height="32">退出
            </button>
        </li>
    </ul>
</nav>
<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
            <div class="sb-sidenav-menu">
                <div class="nav">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts"
                       aria-expanded="false" aria-controls="collapseLayouts">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        用户管理
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                    </a>
                    <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne"
                         data-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="/users">用户列表</a>
                        </nav>
                    </div>

                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts4"
                       aria-expanded="false" aria-controls="collapseLayouts4">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        商家管理
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                    </a>
                    <div class="collapse " id="collapseLayouts4" aria-labelledby="headingOne"
                         data-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="/stores_audit">商家审核</a>
                            <a class="nav-link" href="/stores">商家列表</a>
                        </nav>
                    </div>

                    <a class="nav-link " href="#" data-toggle="collapse" data-target="#collapseLayouts3"
                       aria-expanded="true" aria-controls="collapseLayouts3">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        抽奖管理
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                    </a>
                    <div class="collapse show" id="collapseLayouts3" aria-labelledby="headingOne"
                         data-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="/lotterys_audit">抽奖审核</a>
                            <a class="nav-link active" href="/lotterys">抽奖列表</a>
                        </nav>
                    </div>
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts1"
                       aria-expanded="false" aria-controls="collapseLayouts1">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        开发者管理
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                    </a>
                    <div class="collapse" id="collapseLayouts1" aria-labelledby="headingOne"
                         data-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="http://localhost:8848/nacos/" target="_blank">注册&配置中心</a>
                            <a class="nav-link" href="http://localhost:8080" target="_blank">服务限流</a>
                        </nav>
                    </div>
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts2"
                       aria-expanded="false" aria-controls="collapseLayouts2">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        接口文档
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                    </a>
                    <div class="collapse" id="collapseLayouts2" aria-labelledby="headingOne"
                         data-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="http://localhost:5710/doc.html" target="_blank">用户模块</a>
                            <a class="nav-link" href="http://localhost:5720/doc.html" target="_blank">抽奖模块</a>
                            <a class="nav-link" href="http://localhost:5730/doc.html" target="_blank">系统模块</a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="sb-sidenav-footer">
                <div class="small">Logged in as:</div>
                QR Lottery System
            </div>
        </nav>
    </div>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid">
                <h1 class="mt-4">抽奖列表</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item">抽奖管理</li>
                    <li class="breadcrumb-item active">抽奖列表</li>
                </ol>

                <div class="card mb-4">
                    <div class="card-header"><i class="fas fa-table mr-1"></i></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" width="100%" cellspacing="0" id="lotterys_table">
                                <thead>
                                <tr>
                                    <th>活动编号</th>
                                    <th>抽奖标题</th>
                                    <th>发起商家</th>
                                    <th>最低参与人数</th>
                                    <th>起止时间</th>
                                    <th>抽奖状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer small text-muted">
                        <!--        分页文字信息-->
                        <div class="col-md-6 " id="page_info_area">

                        </div>
                        <!--        分页条信息-->
                        <div class="col-md-6" id="page_nav_area" style="float: right">

                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">© 2020 QR-Lottery-System.</div>
                </div>
            </div>
        </footer>
    </div>
</div>

<!--抽奖详细信息的模态框-->
<div class="modal" id="lotteryDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">抽奖活动详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group ">
                            <label>抽奖标题</label>
                            <input type="text" name="lotteryTitle" class="form-control"
                                   disabled="disabled" id="lotteryTitle">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group ">
                            <label>发起商家</label>
                            <input type="text" name="storeName" class="form-control"
                                   disabled="disabled" id="storeName">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-group  ">
                            <label>抽奖介绍</label>
                            <textarea class="form-control" name="lotteryExplain"
                                      id="lotteryExplain" disabled="disabled" rows="7"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <div class="form-group ">
                            <label>最低参与人数</label>
                            <input type="text" name="minimumPerson" class="form-control"
                                   disabled="disabled" id="minimumPerson">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group ">
                            <label>起止时间</label>
                            <input type="text" name="time" class="form-control"
                                   disabled="disabled" id="time">
                        </div>
                    </div>
                    <hr>
                    <div>
                        <p style="color: red" class="lead">以下是奖品部分
                    </div>
                    <table id="prize" class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                        <tr>
                            <th style="width: 200px">奖项</th>
                            <th style="width: 100px">数量</th>
                            <th style="width: 450px">内容</th>
                            <th style="width: 400px">图片</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    const token = localStorage.getItem("token");
    var totalRecord = null;
    var currentPage = null;

    $(function f() {
        //token存在
        if (token != null && token != '') {
            $.ajax({
                url: "http://localhost:5761/lottery-system-system/user/api/user/testToken",
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                success: function (result) {
                    // console.log(result);
                    if (result.code == 200) {
                        document.getElementById("name").innerHTML = "<img src='/assets/img/person.svg' alt='' width='32' height='32'>欢迎您，" + result.data.username;
                        //退出
                        $("#logout").click(function () {
                            localStorage.removeItem("token");
                            window.location.href = "http://localhost:90/login";
                        });
                        to_page(1);
                    } else {
                        //token过期或异常
                        localStorage.removeItem("token");
                        return window.location.href = "http://localhost:90/login";
                    }
                }
            });
        } else {
            //token不存在
            return window.location.href = "http://localhost:90/login";
        }
    });

    function to_page(pageNum) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/lottery/lotteryList",
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            data: "pageNum=" + pageNum,
            success: function (result) {
                // console.log(result);
                build_lotterys_table(result);
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    //解析并显示抽奖数据
    function build_lotterys_table(result) {
        $("#lotterys_table tbody").empty();
        var lotterys = result.data.list;
        // console.log(lotterys);
        $.each(lotterys, function (index, item) {
            var idTd = $("<td></td>").append(item.id);
            var lotteryTitleTd = $("<td></td>").append(item.lotteryTitle);
            var storeNameTd = $("<td></td>").append(item.storeName);
            var minimumPersonTd = $("<td></td>").append(item.minimumPerson);
            var timeTd = $("<td></td>").append(item.startTime + " ~ <br>" + item.dueTime);
            var lotteryStatusTd = $("<td></td>").append(item.lotteryStatus == 0 ? '未开奖' : '已开奖');
            var detailBtn = $("<button></button>").addClass("btn btn-primary btn-sm detail_btn").append($("<span></span>")).append("查看详细信息");
            detailBtn.attr("detail-id", item.id);
            var btnTd = $("<td></td>").append(detailBtn);
            // $("<tr></tr>").append(storeUserNoTd).append(storeNameTd).append(legalNameTd).append(btnTd).appendTo("#users_table tbody");
            $("<tr></tr>").append(idTd).append(lotteryTitleTd).append(storeNameTd).append(minimumPersonTd).append(timeTd).append(lotteryStatusTd).append(btnTd).appendTo("#lotterys_table tbody")
        });
    }

    //解析并显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.data.pageNum + "页,总" + result.data.pages + "页,总" + result.data.total + "条记录");
        totalRecord = result.data.total;
        currentPage = result.data.pageNum;
    }

    //解析并显示分页条信息
    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //首页
        var firstPageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("首页").attr("href", "#"));
        //上一页
        var prePageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        if (result.data.hasPreviousPage == false) {
            firstPageLi.addClass("page-item disabled");
            prePageLi.addClass("page-item disabled");
        } else {
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.data.pageNum - 1);
            });
        }
        //下一页
        var nextPageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        //末页
        var lastPageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("末页").attr("href", "#"));
        if (result.data.hasNextPage == false) {
            nextPageLi.addClass("page-item disabled");
            lastPageLi.addClass("page-item disabled");
        } else {
            nextPageLi.click(function () {
                to_page(result.data.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.data.pages);
            });
        }
        ul.append(firstPageLi).append(prePageLi);
        $.each(result.data.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if (result.data.pageNum == item) {
                numLi.addClass("page-item active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    $(document).on("click", ".detail_btn", function () {
        getLottery($(this).attr("detail-id"));
        $("#lotteryDetailModal").modal({
            backdrop: "static"
        });
    });

    function getLottery(id) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/lottery/getLottery/" + id,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            success: function (result) {
                // console.log(result);
                $("#prize tbody").empty();
                $("#lotteryTitle").val(result.data.lotteryTitle);
                $("#time").val(result.data.startTime + "~" + result.data.dueTime);
                $("#storeName").val(result.data.storeName);
                $("#minimumPerson").val(result.data.minimumPerson);
                $("#lotteryExplain").val(result.data.lotteryExplain);

                var prizes = result.data.prizeDTOList;
                $.each(prizes, function (index, item) {
                    var prizeLevelTd = $("<th style='width: 200px'></th>").append(item.prizeLevel);
                    var prizeNumsTd = $("<th style='width: 100px'></th>").append(item.prizeNums);
                    var prizeContentTd = $("<th style='width: 450px'></th>").append(item.prizeContent);
                    var prizeImagUrlTd = $("<th style='width: 400px'></th>").append("<img  width='200px' alt='profile-photo' class='img-fluid'  src=" + item.prizeImagUrl + ">");
                    $("<tr></tr>").append(prizeLevelTd).append(prizeNumsTd).append(prizeContentTd).append(prizeImagUrlTd).appendTo("#prize tbody");
                    var img = document.getElementsByTagName("img");
                    for (var i = 0; i < img.length; i++) {
                        img[i].style.cursor = "pointer";
                    }
                    prizeImagUrlTd.click(function () {
                        window.open(item.prizeImagUrl);
                    });
                });
            }
        });
    }

</script>

</body>
</html>
